<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>基本列表</title>
    <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
<div id="root">
    <h2>人员列表（遍历数组）</h2>
    <ul>
        <!--:key代表的是生成每一个虚拟DOM的标识,后续会被DIFF算法作为对比的标识使用-->
        <li v-for="(p,index) in persons" :key="index">
            {{p.name}}-{{p.age}}
        </li>
    </ul>

    <h2>汽车信息（遍历对象）</h2>
    <ul>
        <li v-for="(value,k) in car" :key="k">
            {{k}}-{{value}}
        </li>
    </ul>

    <h2>遍历字符串</h2>
    <ul>
        <li v-for="(char,index) in str" :key="index">
            {{char}}-{{index}}
        </li>
    </ul>

    <h2>遍历指定次数</h2>
    <ul>
        <li v-for="(number,index) in 5" :key="index">
            {{index}}-{{number}}
        </li>
    </ul>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
        el: '#root',
        data: {
            persons: [
                {id: '001', name: '张三', age: 18},
                {id: '002', name: '李四', age: 19},
                {id: '003', name: '王五', age: 20}
            ],
            car: {
                name: '奥迪A8',
                price: '70万',
                color: '黑色'
            },
            str: 'hello'
        }
    })

    /**
     * 在v-for="(a,b) in x"中 前面的是值,后面的是键
     *  例如数组:前面的是数组值,后面的是下标
     *  例如对象:前面的是对象值,后面的是对象名
     */
</script>
</body>
</html>

